import { HookTypeScriptHints } from '../../components'
import { Link, Warning } from '@brillout/docpress'

The `onBeforeRoute()` hook provides full control over routing.

It is usually used for [internationalization](/i18n):

```js
export { onBeforeRoute }

function onBeforeRoute(pageContext) {
  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlPathname)
  return {
    pageContext: {
      locale,
      urlLogical: urlWithoutLocale
    }
  }
}
```

We can also use it to [implement a custom router](https://github.com/vikejs/vike/issues/140).

<Warning>For use cases other than i18n, open a GitHub ticket or reach out on Discord: `onBeforeRoute()` is purposely limited but the limitations can be lifted in order to unlock new capabilities.</Warning>

Example:
- <Link href='/examples/i18n/renderer/+onBeforeRoute.js' />

## TypeScript

```ts
export { onBeforeRoute }

import type { OnBeforeRouteSync } from 'vike/types'

const onBeforeRoute: OnBeforeRouteSync = (pageContext): ReturnType<OnBeforeRouteSync> => {
  // ...
}
```

<HookTypeScriptHints hookTypeName="OnBeforeRouteSync" />
